import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Nabar from '../../conpoment/Nabar';
import styles from './index.module.css';
function Index() {
  const navigate = useNavigate();
  const [showSwitchModal, setShowSwitchModal] = useState(false);
  const [currentUser, setCurrentUser] = useState('user1');
  // 用户数据
  const users = [
    { id: 'user1', name: '王小柯', userId: '2015****10' },
    { id: 'user2', name: '李玲玲', userId: '2015****11' }
  ];
  const currentUserData = users.find(user => user.id === currentUser) || users[0];
  const handleViewDetails = () => {
    console.log('查看导诊详情');
    // 这里可以添加跳转到详情页面的逻辑
    navigate('/outpatient_guide_xq');
  };
  const handleSwitchClick = () => {
    setShowSwitchModal(true);
  };
  const handleCloseModal = () => {
    setShowSwitchModal(false);
  };
  const handleSwitchUser = (userId: string) => {
    console.log('切换到用户:', userId);
    setCurrentUser(userId);
    setShowSwitchModal(false);
    // 这里可以添加切换用户的逻辑
  };
  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
      <Nabar title="门诊导诊单" sticky={false} />
      {/* 用户信息栏 */}
      <div className={styles.userInfo}>
        <div className={styles.userDetails}>
          <span className={styles.userName}>{currentUserData.name}</span>
          <span className={styles.userId}>{currentUserData.userId}</span>
        </div>
        <div onClick={handleSwitchClick}>
          <span className={styles.switchIcon}>👤</span>
          <span className={styles.switchText}>切换</span>
        </div>
      </div>
      {/* 预约信息卡片 */}
      <div className={styles.appointmentCard}>
        {/* 医生信息 */}
        <div className={styles.doctorInfo}>
          <div className={styles.doctorAvatar}>
            <div className={styles.avatarIcon}> </div>
          </div>
          <div className={styles.doctorDetails}>
            <div className={styles.doctorNameRow}>
              <span className={styles.doctorName}>刘医生</span>
              <span className={styles.doctorTitle}>主任医师</span>
            </div>
            <div className={styles.department}>
                门诊外一科
                <span style={{marginLeft: '10px'}}>四川省保健院南苑</span>
                </div>
          </div>
        </div>
        {/* 预约详情 */}
        <div className={styles.appointmentDetails}>
          <div>
            <span>登记号:</span>
            <span  style={{marginLeft: '10px'}}>20200101001598Z</span>
          </div>
          <div>
            <span >预约时间:</span>
            <span  style={{marginLeft: '10px'}}>2020-01-27 08:30-12:00 (上午)</span>
          </div>
        </div>
        {/* 查看详情按钮 */}
        <div className={styles.actionArea}>
          <button className={styles.detailsButton} onClick={handleViewDetails}>
            查看导诊详情
          </button>
        </div>
      </div>
      {/* 切换用户弹框 */}
      {showSwitchModal && (
        <div className={styles.modalOverlay} onClick={handleCloseModal}>
          <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
            <div className={styles.modalHeader}>
              <h3>选择就诊人</h3>
              <button className={styles.closeButton} onClick={handleCloseModal}>×</button>
            </div>
            <div className={styles.userList}>
              {users.map((user) => (
                <div 
                  key={user.id} 
                  className={`${styles.userItem} ${currentUser === user.id ? styles.selectedUser : ''}`}
                  onClick={() => handleSwitchUser(user.id)}
                >
                  <div className={styles.userInfo}>
                    <div className={styles.userName}>{user.name}</div>
                    <div className={styles.userId}>{user.userId}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className={styles.modalFooter}>
              <button className={styles.addUserButton}>+ 添加就诊人</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
export default Index;